
<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import {AddApp} from "@/api/app.js";
import {AppType} from "@/Constant/App/appType.js";
import {AppScoringStrategy} from "@/Constant/App/appScoringStrategy.js";

const dialogVisible = ref(false);
const ScoringFormRef = ref(null);
const emit = defineEmits(['call-parent']); // 声明子组件可以触发的事件

const notifyParent = () => {
  emit('call-parent'); // 触发名为 'call-parent' 的自定义事件
};
const ScoringForm = reactive({
  appName: '',
  appDesc: '',
  appType: '',
  appIcon: '',
  scoringStrategy: '',
});

const rules = {
  appName: [
    { required: true, message: '请输入App名称', trigger: 'blur',},
    {
      min: 2,
      max: 20,
      message: '长度在 2 到 20 个字符',
      trigger: 'blur'
    }
  ],
  appDesc: [
    { required: true, message: '请输入app的描述', trigger: 'change' }
  ],
  appType: [
    { required: true, message: '请选择app的类型', trigger: 'change' }
  ],
  scoringStrategy:[
    {required: true, message: '请选择评分策略', trigger: 'change'}
  ]
};

const handleAvatarChange = (file) => {
  ScoringForm.appIcon = file.raw;
};

const AddrequestParam = ()=>{
  let param = {
    appName: ScoringForm.appName,
    appDesc: ScoringForm.appDesc,
    appType: ScoringForm.appType,
    appIcon: ScoringForm.appIcon===''?null:ScoringForm.appIcon,
    scoringStrategy: ScoringForm.scoringStrategy,
  }
  return param;
}

const submitForm = async () => {
  if (!ScoringFormRef.value) return;
  await ScoringFormRef.value.validate(async (valid) => {
    if (valid) {
      // 这里可以添加提交表单的逻辑
      console.log('提交的表单数据:', ScoringForm);
      await AddScoring(AddrequestParam(ScoringForm))
          .then(() => {
            // 提交成功后的逻辑
            ElMessage.success('提交成功');
            notifyParent();
            // 重置表单
            ScoringFormRef.value.resetFields();
            dialogVisible.value = false;
          })
          .catch((error) => {
            console.error('提交失败:', error);
            ElMessage.error('提交失败，请重试。');
            dialogVisible.value = false;
          });
    } else {
      ElMessage.error('表单验证失败，请检查必填项。');
    }
  });
};

// 暴露一个方法用于显示对话框
const showAddScoringDialog = () => {
  dialogVisible.value = true;
};

defineExpose({
  showAddScoringDialog
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="添加应用">
    <el-form :model="ScoringForm" :rules="rules" ref="ScoringFormRef" label-width="120px">
      <el-form-item label="名称" prop="appName">
        <el-input v-model="ScoringForm.appName" placeholder="请输入app的名称"/>
          </el-form-item>
      <el-form-item label="描述" prop="appDesc">
        <el-input v-model="ScoringForm.appDesc" placeholder="请输入app的描述"/>
      </el-form-item>
        <el-form-item label="图片">
        <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleAvatarChange"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="应用种类" prop="appType">
        <el-select v-model="ScoringForm.appType" placeholder="请选择app种类">
          <el-option v-for="(value,label) in AppType" :key="value" :label="label" :value="value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="评分标准" prop="scoringStrategy">
        <el-select v-model="ScoringForm.scoringStrategy" placeholder="请选择app评分标准">
          <el-option v-for="(value,label) in AppScoringStrategy" :key="value" :label="label" :value=value />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<style scoped>
/* 可以添加自定义样式 */
</style>